<template>
  <div class="index_top">
    <div class="index_top_main">
      <p class="index_top_main_text">总库存</p>
      <p class="index_top_main_num">{{ list.totalStockNumber }}</p>
      <img class="index_top_main_img" src="@/assets/index/zkc.png" alt="">
    </div>
    <div class="index_top_main">
      <p class="index_top_main_text">库存率</p>
      <p class="index_top_main_num" style="rgba(255, 192, 115, 1)">{{ list.rate }}</p>
      <img class="index_top_main_img1" src="@/assets/index/kcl.png" alt="">
    </div>
    <div class="index_top_main">
      <p class="index_top_main_text">今日已入库/今日总入库</p>
      <p class="index_top_main_num" style="color: rgba(158, 224, 128, 1);">{{ list.warehousingNumber.already_number }} / {{ list.warehousingNumber.total_number }} </p>
      <img class="index_top_main_img" src="@/assets/index/rk.png" alt="">
    </div>
    <div class="index_top_main">
      <p class="index_top_main_text">今日已出库/今日总出库</p>
      <p class="index_top_main_num" style="color: rgba(122, 222, 255, 1);">{{ list.warehouseOutNumber.already_number }} / {{ list.warehouseOutNumber.total_number }} </p>
      <img class="index_top_main_img" src="@/assets/index/ck.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'PanelGroup',
  props: ['list'],
  data() {
    return {
      title: 'IndexTop'
    }
  }
}
</script>

<style lang="scss" scoped>
.index_top {
  display: flex;
  width: 100%;
  height: 116px;
  justify-content: space-between;

  .index_top_main {
    width: 23%;
    height: 116px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    position: relative;

    .index_top_main_text {
      margin: 20px 0 0 20px;
      color: rgba(102, 102, 102, 1);
      line-height: 22.4px;
    }

    .index_top_main_num {
      margin: 8px 0 0 20px;
      line-height: 41.16px;
      color: rgba(110, 185, 255, 1);
      font-size: 30px;
    }

    .index_top_main_img {
      position: absolute;
      width: 40px;
      height: 40px;
      top: 13px;
      right: 20px;
    }

    .index_top_main_img1 {
      position: absolute;
      width: 173px;
      height: 67px;
      top: 39px;
      right: 3px;
    }
  }
}
</style>
